<template>
	<van-skeleton title avatar :row="4" :loading="loading">
		<!-- <van-sidebar v-model="active" @change="onChange">
			<van-sidebar-item title="标签名称"/>
			<van-sidebar-item title="标签名称"/>
			<van-sidebar-item title="标签名称"/>
		</van-sidebar> -->
		<div class="div">
			<van-pull-refresh v-model="loading" @refresh="onRefresh"></van-pull-refresh>

			<van-card @click="toDishesDetails(item.id)" v-for="(item) in dishesArray" :key="item">

				<template #tags>
					<van-image class="dishes-image" width="150px" height="150px" fit="cover" lazy-load
						:src="item.dishesPhotoOrVideoUrl" alt="缺省图" />
					<br />
					<span title="标题">{{item.title}}</span>
					<span title="销量">月售{{item.sales}}</span><br />
					<span title="折扣"></span>
					<span title="分量">{{item.weight}}</span>
					<span title="口味">{{item.taste}}</span><br />
					<van-tag plain type="danger">40-8</van-tag>
					<van-tag plain type="danger">30-4</van-tag><br />
					<van-tag plain type="danger">{{item.discount}}折|限1份</van-tag>
					<span title="价格">{{item.price}}￥</span>
				</template>
			</van-card>
			<router-view />
			<van-tabbar route>
				<van-tabbar-item replace to="/waimaiindex" icon="home-o">首页</van-tabbar-item>
				<van-tabbar-item icon="diamond-o" badge="99+">会员</van-tabbar-item>
				<van-tabbar-item replace to="/" icon="label-o" badge="99+">订单</van-tabbar-item>
				<van-tabbar-item icon="apps-o">更多</van-tabbar-item>
			</van-tabbar>
		</div>
	</van-skeleton>


</template>
<script>
	// import qs from 'qs'
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		Toast
	} from 'vant';
	export default {
		name: "DishesList",
		setup() {
			const loading = ref(true);

			onMounted(() => {
				loading.value = false;
			});

			return {
				loading,
			};
		},
		data() {
			return {
				dishesArray: [],
				active: 0,
				// loading: false,
			}
		},
		mounted() { //挂载之后执行的方法
			this.getShopInfoList();
		},
		methods: {
			onChange(index){
				console.log(index);
				this.active = index;
			},
			onMounted() {
				this.loading = false;
			},
			onRefresh() {
				setTimeout(() => {
					this.getShopInfoList();
					Toast('刷新成功');
					this.loading.value = false;
					this.count.value++;
				}, 1000);
			},

			toDishesDetails(id) {
				console.log("dishesId=" + id);
				this.$router.push({
					path: '/dishesDetails',
					query: {
						'id': id
					}
				})
			},
			getShopInfoList() {
				let shopId = this.$route.query.shopId;
				console.log("shopId=" + shopId);
				this.$axios.get('/dishes/list/' + shopId, {
						params: {
							// pageNum: this.currentPage
						}
					})
					.then(res => {
						// console.log("data=" + res)
						this.dishesArray = res.result.data;
						console.log("shopName=" + this.dishesArray[10].shop.shopName)
					}).catch(error => {
						console.log("error:" + error)
					})
			},



		}
	}
</script>
<style scoped>
	.div{
		margin-bottom: 60px;
	}
	span {
		/* 上右下左 */
		margin: 10px 0px 0px 10px;
	}

	.dishes-image {
		float: left;
		display: inline-block;
		/* width: 600px; */

	}
</style>
